<template>
  <el-dialog
    title="温度变化趋势图"
    @close="onClose"
    v-model="visible"
    width="800px"
    :close-on-click-modal="false"
  >
    <div>
      <el-date-picker
        style="width: 320px"
        v-model="time"
        type="datetimerange"
        start-placeholder="开始时间"
        end-placeholder="结束时间"
        format="YYYY-MM-DD HH:mm"
        value-format="YYYY-MM-DD HH:mm"
        date-format="YYYY-MM-DD"
        time-format="HH:mm:ss"
        :default-time="[new Date(2000, 1, 1, 0, 0, 0), new Date(2000, 1, 1, 23, 59, 59)]"
        @change="updateChart"
      />
    </div>
    <div ref="chart_ref" class="chart" id="chart"></div>
  </el-dialog>
</template>

<script setup>
import * as echarts from 'echarts'
import 'echarts/lib/chart/map'
import '@/utils/china.js' // 从echarts4.9.0版本中获取的地图数据，这样引入即可，不需要注册
import { deviceMapApi } from '@/api/statistic'
import { parseTime } from '@/utils/tools'
import { getTempTrendListApi } from '@/api/device'
const allData = ref([]) // 服务器返回的数据
const chart_ref = ref(null)
const visible = ref(false)

const initOption = ref({})
const queryParams = reactive({
  startDate: '',
  endDate: '',
  machineId: ''
})
const time = ref([])
let chartInstance = null
// 初始化echartInstance

function initChart() {
  chartInstance = echarts.init(chart_ref.value, 'chart')
  initOption.value = {
    tooltip: {
      trigger: 'axis',
      position: function (pt) {
        return [pt[0], '10%']
      },
      formatter: function (params) {
        return `${params[0]?.axisValueLabel}<br />${params[0].marker}${params[0]?.seriesName}    ${params[0]?.data[1]}°C`
      }
    },
    xAxis: {
      type: 'time',
      boundaryGap: false
    },
    yAxis: {
      type: 'value',
      boundaryGap: [0, '100%']
    },
    dataZoom: [
      {
        type: 'inside',
        start: 0,
        end: 20
      },
      {
        start: 0,
        end: 20
      }
    ],
    series: [
      {
        name: '温度',
        type: 'line',
        smooth: true,
        symbol: 'none',
        areaStyle: {},
        data: []
      }
    ]
  }
  chartInstance.setOption(initOption.value)
}

function onClose() {
  visible.value = false
}

function updateChart() {
  queryParams.startDate = time.value?.length ? time.value[0] : ''
  queryParams.endDate = time.value?.length ? time.value[1] : ''
  getTempTrendListApi(queryParams).then((res) => {
    const data =
      res?.data.map((i) => {
        return [new Date(i.createTime).getTime(), i.temp]
      }) || []
    const dataOption = {
      series: [
        {
          data: data
        }
      ]
    }
    chartInstance.setOption(dataOption)
  })
}
function init(id) {
  visible.value = true
  queryParams.machineId = id
  time.value = [
    parseTime(new Date(), '{y}-{m}-{d}') + ' 00:00:00',
    parseTime(new Date(), '{y}-{m}-{d}') + ' 23:59:59'
  ]
  nextTick(() => {
    initChart()
    updateChart()
  })
}

defineExpose({
  init
})
</script>

<style lang="scss" scoped>
.chart {
  width: 800px;
  height: 500px;
}
</style>
